<template>
	<div class="header-bar">
  <h1 class="title">
    <router-link :to="{ name: 'HomeView'}">豆瓣</router-link>
  </h1>
  <span class="talion" @click="showTalion"></span>
  <ul class="nav">
    <li>
      <router-link style="color: #2384E8" :to="{name: 'MovieView'}">电影</router-link>
    </li>
    <li>
      <router-link style="color: #9F7860" :to="{name: 'BookView'}">图书</router-link>
    </li>
    <li>
      <router-link style="color: #E4A813" :to="{name: 'StatusView'}">广播</router-link>
    </li>
    <li>
      <router-link style="color: #2A8BCC" :to="{name: 'GroupView'}">小组</router-link>
    </li>
  </ul>
  
 </div>
</template>

<script>
export default {
  name: 'header-bar',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods:{
  	showTalion:function(){
  		this.$emit('showTalion')
  	}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.header-bar {
	overflow: hidden;
  .title {
  	float: left;
    width: 4.6rem;
    height: 2.2rem;
    margin-right: 1.8rem;
    font-size: 0;
    line-height: 3.2rem;
    color: #00b600;
    word-break: break-all;
    background: url() no-repeat;
    background-size: cover;

    a {
      display: block;
    }
  }

  ul {
    float:right;
  }

  li {
    display: inline-block;
    font-size: 1.6rem;
    margin-right: 1.2rem;
  }

  .talion {
  	float: right;
  	display: inline-block;
    font-size: 0;
    background: url() no-repeat;
    background-size: cover;
    width: 2.4rem;
    height: 1.8rem;
  }
}
</style>
